<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- <p>{{str}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
        <p>{{a}}</p>
        <p>{{b}}</p>
        <p>{{arr}}</p>
        <p>{{obj}}</p> -->

        <!-- javascript表达式 -->
        <!-- <p>{{str + ",are you ok!"}}</p>
        <p>{{num + 100}}</p>
        <p>{{bool + true}}</p> -->

        <!-- 文本插值中可以调用函数 -->
        <!-- <p>{{str.split("").reverse().join("")}}</p>
        <p>{{reverseStr()}}</p> -->

        <p>{{num % 2 == 0 ? '偶数':'奇数'}}</p>

        <!-- 程序的三大流程控制:顺序结构 选择结构 循环结构 -->
        <!-- <p>{{if(num % 2 == 0){}  }}</p> -->
    </div>
</body>
<script>
    // Vue的模版语法  =>  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    // 文本插值  {{}}  =>   {{}}会被替换为数据对象(data)上对应属性名的值

    // 1. 不同类型的数据在 {{}}语法中,展示效果也不一样
    // a. string number boolean 在 {{}}语法中会原样输出
    // b. null undefined  {{}}语法中会输出为""
    // c. 数组 对象 在{{}}语法会先转化为json字符串(JSON.stringify()),再输出

    // 2. 文本插值中的内容可以是JavaScript表达式  => a.先求解表达->得到结果 b.再将结果拼接
    // 3. 文本插值中可以调用函数
    // 4. 文本插值中可以做一些简单的判断  => 三目运算符


    var app = new Vue({  // 创建Vue实例
        el: "#app",   // 挂载的元素
        data: { // 数据层 => 对应属性名将属性值 拼接到模版语法中
            str: "hello Vue",
            num: 100,
            bool: true,
            a: null,
            b: undefined,
            arr: [1, 2, 3],
            obj: { a: 1, b: 2 }
        },
        methods:{
            reverseStr(){
                return this.str.split("").reverse().join("");
            }
        }
    })









</script>

</html>